<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.big-web{
			width: 1020px;
			margin: 100px auto;
			border: 1px solid black;
			height: 500px;
			position: relative;
			overflow: hidden;
			padding: 30px 0;
			box-sizing: border-box;
		}
		.big-web ul{
			list-style: none;
			position: absolute;
			width: 6000px;
			top: 0px;
			left: 0;
		}
		.big-web ul li{
			float: left;
			margin: 5px 10px 5px 0;
		}
		.big-web ul li img{
			height: 480px;
		}
		.big-web .closed{
			width: 50px;
			height: 30px;
			background: rgba(0,0,0,0.3);
			color: white;
			text-align: center;
			line-height:30px;
			position:absolute;
			right: 0;
			top: 0px;
			cursor: pointer;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript">
		window.onload = function() {
			
			$(".big-web .closed").click(function(){
        		
        		$(".big-web").hide(500);
        	})
			
			var allLong = 0;
			var time = 20000;
			$(".big-web ul li").each(function(){
				allLong += $(this).outerWidth(true);
			});

			$(".big-web ul li").clone().appendTo(".big-web ul");

			dongyici(time);
			function dongyici(t){
				$(".big-web ul").animate({"left":-allLong},t,"linear",function(){
					$(this).css("left",0);
					dongyici(time);
				});
			}

			$(".big-web").mouseenter(function(){
				$(".big-web ul").stop();
			});
			
			$(".big-web").mouseleave(function(){
				var x = Math.abs(parseFloat($(".big-web ul").css("left")));
				var t = (allLong - x) / allLong * time;
				dongyici(t);
			});
			
		}
	</script>
	<body>
		<div class="big-web">
			<ul>
				<li><a href="#"><img src="img/wang-1.jpg" alt="" /></a></li>
				<li><a href="#"><img src="img/wang-2.jpg" alt="" /></a></li>
				<li><a href="#"><img src="img/wang-3.jpg" alt="" /></a></li>
				<li><a href="#"><img src="img/wang-4.jpg" alt="" /></a></li>
				<li><a href="#"><img src="img/wang-5.jpg" alt="" /></a></li>
				<li><a href="#"><img src="img/wang-6.jpg" alt="" /></a></li>
			</ul>
			<div class="closed">关闭</div>
		</div>
	</body>
</html>
